{% extends "admin/base.html" %}

{% block title %}控制台 - 地标和路径管理系统{% endblock %}

{% block extra_css %}
<link href="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.css" rel="stylesheet">
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 页面标题 -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800 page-title">控制台</h1>
        <div>
            <a href="#" class="d-none d-sm-inline-block btn btn-sm btn-secondary shadow-sm">
                <i class="bi bi-download me-1"></i> 生成报告
            </a>
        </div>
    </div>

    <!-- 统计卡片 -->
    <div class="row">
        <!-- 地标数量卡片 -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card stats-card primary h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">地标数量</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800" id="landmark-count">{{ landmarks|length }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-geo-alt-fill stats-icon"></i>
                        </div>
                    </div>
                    <div class="mt-3 text-center">
                        <a href="/admin/landmarks/create" class="btn btn-sm btn-primary">
                            <i class="bi bi-plus-circle me-1"></i>添加地标
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 路径数量卡片 -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card stats-card success h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">路径数量</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800" id="route-count">{{ routes|length }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-route-fill stats-icon"></i>
                        </div>
                    </div>
                    <div class="mt-3 text-center">
                        <a href="/admin/routes/create" class="btn btn-sm btn-success">
                            <i class="bi bi-plus-circle me-1"></i>添加路径
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 媒体文件数量卡片 -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card stats-card info h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">媒体文件</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800" id="media-count">0</div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-images stats-icon"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 系统状态卡片 -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card stats-card warning h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">系统状态</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">运行中</div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-cpu stats-icon"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 图表区域 -->
    <div class="row">
        <!-- 地标与路径比例图 -->
        <div class="col-xl-8 col-lg-7">
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">地标与路径分布</h6>
                </div>
                <div class="card-body">
                    <div class="chart-bar" style="height: 300px;">
                        <canvas id="landmarkRouteChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- 快速操作 -->
        <div class="col-xl-4 col-lg-5">
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">快速操作</h6>
                </div>
                <div class="card-body">
                    <div class="list-group">
                        <a href="/admin/landmarks/create" class="list-group-item list-group-item-action">
                            <div class="d-flex w-100 justify-content-between">
                                <h6 class="mb-1"><i class="bi bi-plus-circle text-primary me-2"></i>添加新地标</h6>
                            </div>
                            <p class="mb-1">创建一个新的地标点</p>
                        </a>
                        <a href="/admin/routes/create" class="list-group-item list-group-item-action">
                            <div class="d-flex w-100 justify-content-between">
                                <h6 class="mb-1"><i class="bi bi-plus-circle text-success me-2"></i>创建新路径</h6>
                            </div>
                            <p class="mb-1">创建一个新的游览路径</p>
                        </a>
                        <a href="/api/docs" target="_blank" class="list-group-item list-group-item-action">
                            <div class="d-flex w-100 justify-content-between">
                                <h6 class="mb-1"><i class="bi bi-code-square text-info me-2"></i>查看API文档</h6>
                            </div>
                            <p class="mb-1">浏览系统API接口文档</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 系统信息 -->
    <div class="row">
        <div class="col-lg-6 mb-4">
            <div class="card">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">系统信息</h6>
                </div>
                <div class="card-body">
                    <table class="table table-borderless">
                        <tr>
                            <td><strong>系统名称</strong></td>
                            <td>地标和路径管理系统</td>
                        </tr>
                        <tr>
                            <td><strong>系统版本</strong></td>
                            <td>v1.0.0</td>
                        </tr>
                        <tr>
                            <td><strong>框架</strong></td>
                            <td>FastAPI</td>
                        </tr>
                        <tr>
                            <td><strong>API文档</strong></td>
                            <td><a href="/api/docs" target="_blank">http://localhost:8000/api/docs</a></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-lg-6 mb-4">
            <div class="card">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">最近活动</h6>
                </div>
                <div class="card-body">
                    <div class="list-group">
                        <div class="list-group-item">
                            <div class="d-flex w-100 justify-content-between">
                                <h6 class="mb-1">系统初始化</h6>
                                <small class="text-muted">刚刚</small>
                            </div>
                            <p class="mb-1">系统已成功初始化并创建示例数据</p>
                        </div>
                        <div class="list-group-item">
                            <div class="d-flex w-100 justify-content-between">
                                <h6 class="mb-1">管理员登录</h6>
                                <small class="text-muted">3分钟前</small>
                            </div>
                            <p class="mb-1">管理员账户已登录系统</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script>
    $(document).ready(function() {
        // 获取地标和路径数量
        $.ajax({
            url: '/api/landmarks',
            type: 'GET',
            success: function(data) {
                $('#landmark-count').text(data.length);
                updateChart();
            }
        });

        $.ajax({
            url: '/api/routes',
            type: 'GET',
            success: function(data) {
                $('#route-count').text(data.length);
                updateChart();
            }
        });

        // 计算媒体文件数量
        function countMediaFiles() {
            let count = 0;
            $.ajax({
                url: '/api/landmarks',
                type: 'GET',
                async: false,
                success: function(data) {
                    data.forEach(function(landmark) {
                        if (landmark.media && landmark.media.length > 0) {
                            count += landmark.media.length;
                        }
                    });
                }
            });
            return count;
        }

        // 更新媒体文件数量
        $('#media-count').text(countMediaFiles());

        // 初始化图表
        let landmarkRouteChart;

        function updateChart() {
            const landmarkCount = parseInt($('#landmark-count').text());
            const routeCount = parseInt($('#route-count').text());

            if (landmarkRouteChart) {
                landmarkRouteChart.data.datasets[0].data = [landmarkCount, routeCount];
                landmarkRouteChart.update();
                return;
            }

            const ctx = document.getElementById('landmarkRouteChart').getContext('2d');
            landmarkRouteChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['地标', '路径'],
                    datasets: [{
                        label: '数量',
                        data: [landmarkCount, routeCount],
                        backgroundColor: [
                            'rgba(78, 115, 223, 0.8)',
                            'rgba(28, 200, 138, 0.8)'
                        ],
                        borderColor: [
                            'rgba(78, 115, 223, 1)',
                            'rgba(28, 200, 138, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                precision: 0
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            backgroundColor: 'rgba(0, 0, 0, 0.7)',
                            titleFont: {
                                size: 14
                            },
                            bodyFont: {
                                size: 14
                            },
                            padding: 10
                        }
                    }
                }
            });
        }

        // 初始化图表
        updateChart();

        // 侧边栏切换
        $('#sidebar-toggle').click(function() {
            $('#sidebar').toggleClass('show');
        });
    });
</script>
{% endblock %}
